<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript">
		/**
		 *
		 *
		 */
	    (function(){
			document.documentElement.style.fontSize = ((document.documentElement.clientWidth>414?414:document.documentElement.clientWidth) / 1080) * 625 + '%';
		})();
    </script>
</head>
<body>
	<div id="app">
		
	</div>
<script type="text/javascript" src="react/react.js"></script>
<script type="text/javascript" src="react/react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const data = {

};
class VDraggable extends React.Component {
	constructor(props) {
        super(props);
        this.state = {
            
        }
    }

	// 第一步阅读这个
    render() {
        return (
            <div>
                <div className="header white">
                    社区评级
                </div>
                <div className="wrapper">
                    <ul className="data-list">
                        <li>
                            <div className="line1">
                                <img src="img/logo200.png"/>
                                <p className="rating-title">BTC社区评级|第1期</p>
                            </div>
                            <div className="line2 border-1px-bottom">
                                <div className="grades">
                                    <p className="num">7.19</p>	
                                    <p className="des">社区评级指数</p>						
                                </div>
                                <div className="solo-home">
                                    <p className="num">15.0INBP</p>	
                                    <p className="des d-center">今日矿池</p>						
                                </div>
                                <div className="result">
                                    <p className="r-btn">查看结果</p>
                                    <p className="des d-center">1283人评级</p>						
                                </div>
                            </div>
                            <div className="line3">
                                <p className="r-date">评级日期：08-27至11-30</p>
                                <p className="r-num">最小评级人数：50</p>
                            </div>
                        </li>
                        <li>
                            <div className="line1">
                                <img src="img/logo200.png"/>
                                <p className="rating-title">BTC社区评级|第1期</p>
                            </div>
                            <div className="line2 border-1px-bottom">
                                <div className="grades">
                                    <p className="num">7.19</p>	
                                    <p className="des">社区评级指数</p>						
                                </div>
                                <div className="solo-home">
                                    <p className="num">15.0INBP</p>	
                                    <p className="des d-center">今日矿池</p>						
                                </div>
                                <div className="result">
                                    <p className="r-btn">查看结果</p>
                                    <p className="des d-center">1283人评级</p>						
                                </div>
                            </div>
                            <div className="line3">
                                <p className="r-date">评级日期：08-27至11-30</p>
                                <p className="r-num">最小评级人数：50</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
/**
 * 参数
 * 1.此为拖拽排序组件
 * 2.组件元素的内容
 * @value
 */
const value = [1,2,3];
const el = (
	<div>
		<VDraggable value={value}>
		</VDraggable>	
	</div>
);
ReactDOM.render(
	el,
	document.getElementById('app')
);
	console.log(React);
	console.log(ReactDOM);
</script>
</body>
</html>